<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class 与 Style 数组</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>


    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

    <style>

        .hasError{
            background-color: lightpink;
        }
        .myFont{
            color: blue;
            font-style: italic;
            font-size: 2rem;
        }
    </style>
</head>
<body>
<div id="app">
    <div :class="[activeClass,errorClass]">可以传入v-bind属性来动态切换多个 class</div>

    <!--内联样式-->
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名:内联样式_-style</div>
</div>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            activeClass:"myFont",
            errorClass:"hasError",
            activeColor:"red",
            fontSize:30
        },
        methods:{

        },
        computed:{

        },
    });
</script>
</body>
</html>
